<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />
	
		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
	
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
	
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
				padding: 0;
			}
			
			p {
				margin: 20px 10px;
				font-size: 20px;
			}
			
			#wrapper {
				max-width: 640px;
				position: relative;
			}
			
			.nokia-view-container {
				display: none;
				padding: 50px 5px;
			}
			
			#views-container {
				height: 100%;
			}
			
			#views-container a {
				display: block;
				padding: 10px;
			}
			
			.nokia-widget-header {
				text-align: center;
				padding: 0 10px;
			}
			
			.nokia-widget-footer {
				padding: 10px;
				text-align: center;
			}
			
			.widget-bar {
				position: absolute;
				width: 100%;
			}
			
			.widget-bar.top {
				top: 0;
			}
			
			.widget-bar.bottom {
				bottom: 0;
			}
			
			.widget-title {
				float: left;
				display: block;
				width: 30%;
				padding: 15px 0;
			}
			
			.nav-arrow {
				display: block;
				padding: 0;
				text-decoration: none;
				font-size: 45px;
				float: left;
				width: 35%;
			}
		</style>
	
	</head>

	<body>
		
		<div id="wrapper">
		
			<div class="widget-bar top">
				<h1 class="ui-widget-header nokia-widget-header ui-helper-clearfix">
					<a href="javascript:void(0);" class="nav-arrow" id="back">&lsaquo;</a>
					
					<label class="widget-title">View Control Demo</label>
					
					<a href="javascript:void(0);" class="nav-arrow" id="forward">&rsaquo;</a>
				</h1>
			</div>
			
			<div id="views-container">
			
				<div id="view-element-demo">
					<p>This is a view with a custom container</p>
				</div>
			
			</div>
			
			<div class="widget-bar bottom">
				<h1 class="ui-widget-header nokia-widget-footer">
					Current View:<b id="current-view"></b>
				</h1>
			<div>
	
		</div>
	
		<script type="text/javascript" charset="utf-8">
		
			var init = function() {
				
				// Resize wrapper
				var wrapper = jQuery('#wrapper');
				
				setInterval(function() {
					wrapper.height(window.innerHeight);
				}, 500);
				
				wrapper.height(window.innerHeight);
				
				var ViewManager = new Nokia.ViewManager({
					show: function() {
						jQuery('#current-view').html('&nbsp;' + this.getCurrentIndex());
					}
				});
		
				/*
				 * User Impl
				 * - First View 	
				 */ 
		
				var FirstView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						console.log("initialize FirstView view");
					},
				
					renderUI: function() {
						this._viewHeader = Nokia.dom.parseHTML('<p class="nokia-view-header">First View Header</p>');
						this._nextView = Nokia.dom.parseHTML('<a href="javascript:void(0);">Go to next view</a>');
						this._loadingCaller = Nokia.dom.parseHTML('<a href="javascript:void(0);">Show Loading</a>');
						
						Nokia.dom.append(this.getContainer(), this._viewHeader);
						Nokia.dom.append(this.getContainer(), this._nextView);
						Nokia.dom.append(this.getContainer(), this._loadingCaller);
					},
				
					bindUI: function() {
						this._viewHeader.click(function() {
							console.log('Clicked on Header');
						});
						
						this._nextView.click(function() {
							ViewManager.next();
						});
						
						this._loadingCaller.click(function() {
							
							window.widget.showLoading();
							
							setTimeout(function() {
								window.widget.hideLoading();
							}, 1000);
							
						});
					},
					
					syncUI: function() {
						this._viewHeader.css('color', 'red');
					},
					
					show: function() {
						console.log('show FirstView');
						
						this.getContainer().show();
					},
				});
				
				/*
				 * User Impl
				 * - Second View
				 */ 
				
				var SecondView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					renderUI: function() {
						this._linkBack = Nokia.dom.parseHTML('<a href="javascript:void(0);">Another One</a>');
						this._popupAdvice = Nokia.dom.parseHTML('<a href="javascript:void(0);">Show Advice</a>');
						
						Nokia.dom.append(this.getContainer(), this._linkBack);
						Nokia.dom.append(this.getContainer(), this._popupAdvice);
					},
				
					bindUI: function() {
						this._linkBack.click(function() {
							ViewManager.next();
						});
						
						this._popupAdvice.click(function() {
							window.widget.advice('This is a temporary advice');
						});
					},
					
					callAjax: function(callback) {
						// AJAX
						
						if (callback) {
							callback.apply(this, ['json']);
						}
					},
					
					show: function() {
						console.log('show SecondView');
						
						this.callAjax(function(response) {
							this.getContainer().show();
						});
					}
				});
				
				var ThirdView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					renderUI: function() {
						this._linkFirst = Nokia.dom.parseHTML('<a href="javascript:void(0);">Show First View</a>');
						this._popupNote = Nokia.dom.parseHTML('<a href="javascript:void(0);">Show Note</a>');
						this._clear = Nokia.dom.parseHTML('<a href="javascript:void(0);">Clear stack</a>');
						this._widgetMode = Nokia.dom.parseHTML('<a href="javascript:void(0);">Mode</a>');
						
						Nokia.dom.append(this.getContainer(), this._linkFirst);
						Nokia.dom.append(this.getContainer(), this._popupNote);
						Nokia.dom.append(this.getContainer(), this._clear);
						Nokia.dom.append(this.getContainer(), this._widgetMode);
					},
				
					bindUI: function() {
						this._linkFirst.click(function() {
							ViewManager.show(0);
						});
						
						this._popupNote.click(function() {
							window.widget.note('This is a popup note.');
						});
						
						this._clear.click(function() {
							ViewManager.clear();
						});
					},
					
					show: function() {
						console.log('show ThirdView');
						
						this._widgetMode.html(ViewManager.getViewMode());
						
						this.getContainer().show();
					}
				});
				
				Nokia.ViewManagerDemo = Nokia.Widget.extend({
					
					initialize: function() {
						var instance = this;
						
						instance.bindUI();
						
						var firstView = new FirstView();
				
						var secondView = new SecondView({
							container: '#view-element-demo'
						});
						
						var thirdView = new ThirdView();
						
						ViewManager.add(firstView);
						ViewManager.add(secondView);
						ViewManager.add(thirdView);
						
						firstView.render('#views-container');
						secondView.render('#views-container');
						thirdView.render('#views-container');
						
						// show Widget's main View
						ViewManager.show(firstView);
					},
					
					bindUI: function() {
						var instance = this;
						
						jQuery('#back').click(function() {
							ViewManager.back();
						});
						
						jQuery('#forward').click(function() {
							ViewManager.forward();
						});
						
					}
					
				});
				
				window.widget = new Nokia.ViewManagerDemo();
				
			};
			
			Nokia.use('viewmanager', 'busy', 'lightbox', init);
		
		</script>
	
	</body>
</html>